<template>
  <div id="password">
    <div class="password_part password_part1">
			<div class="password_message">
				<input class="password_message_content"
				v-model='formData.phone' placeholder="输入手机号码" @blur="telValidate()"/>
			</div>
			<div class="password_message">
				<input
					class="password_message_content"
					name="code"
					v-model.trim="formData.code"
					placeholder="输入验证码"
					@blur="yzmValidate()"
				/>
				<a v-on:click="getCode(formData)" class="password_message_code" :disabled="!show">
					<span v-show="show">发送验证码</span>
					<span v-show="!show" class="count">{{count}} s</span>
				</a>
			</div>
    </div>
    <div class="password_part password_part2">
			<div class="password_message">
				<input
					class="password_message_content"
					v-model='password' placeholder="输入密码"
					@blur="pasValidate()" type="password"
				/>
			</div>
			<div class="password_message">
				<input
					class="password_message_content"
					v-model='password1' placeholder="确认密码"
					@blur="confirm()" type="password"
				/>
			</div>
    </div>
	<button class="password_button" @click="updatePassword()">
      确定
    </button>
	<errorTip :errorTipVisible.sync="errorTipVisible" :message="errorMessage"/>
  </div>
</template> 

<script>
import errorTip from '_components/errorTip/errorTip'
import User from '_common/services/user.js';
import '@/utils/rem.js';
const TIME_COUNT = 60;
export default {
	name: 'password',
	data () {
		return {
			formData: {
				phone:'',
				code:'',
			},
			show: true,
			count: '',
			timer: null,
			// 重新设置密码
			password: '',
			// 密码确认
			password1: '',
			visible: false,
			errorTipVisible: false,
			errorMessage: '' // 错误信息
		}
	},
  	props: {
		showPassword: {
			type: Boolean,
			default: false,
		}
	},
	methods: {
		updatePassword () {
			if (!this.telValidate() || !this.yzmValidate() || !this.confirm()) {
				return false;
			}
			if(this.timer){
				clearInterval(this.timer);
                this.timer = null;
			}
			this.show = true;
			User.updatePassword({
				phoneNumber: this.formData.phone,
				verificationCode: this.formData.code,
				newPassword: this.$md5(this.password),
			}).then(res => {
				if(res.code === 408) {
				this.$alertTip({
					message: res.msg,
					time: 2000
				});
				return false;
				} else {
					this.$alertTip({
						message: '修改密码成功， 请重新登录',
						time: 1000
					});
					setTimeout(()=> {
						this.$openRouter({
							name: 'login',
						})
						this.formData.phone = '';
						this.formData.code = '';
						this.newPassword = '';
						this.newPassword1 = '';
					}, 1000)
				}
			});
		},
		getCode(formData){
			if (this.errorTipVisible) return false;
			if(!this.telValidate()) return false;
			if (!this.timer) {
				this.count = TIME_COUNT;
				this.show = false;
				this.timer = setInterval(() => {
				if (this.count > 0 && this.count <= TIME_COUNT) {
					this.count--;
				} else {
					this.show = true;
					clearInterval(this.timer);
					this.timer = null;
				}
				}, 1000);
				User.requestCode({
					type: 2,
					phoneNumber: this.formData.phone
				}).then(res => {
					this.$alertTip({
						message: res.msg,
					});
				})
              }
		},
		telValidate() {
			if (this.errorTipVisible) return false;
			if (this.formData.phone === '') {
				this.errorMessage = '手机号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.tel(this.formData.phone)) {
				this.formData.phone = '';
				this.errorMessage = '手机号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		yzmValidate() {
			if (this.errorTipVisible) return false;
			if (this.formData.code === '') {
				this.errorMessage = '验证码不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.yzm(this.formData.code)) {
				this.formData.code = ''
				this.errorMessage = '验证码格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		pasValidate() {
			if (this.errorTipVisible) return false;
			if (this.password  === '') {
				this.errorMessage = '密码不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.pws(this.password)) {
				this.password = ''
				this.errorMessage = '密码应该为7-16位';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
		// 确认密码
		confirm() {
			if (this.errorTipVisible) return false;
			if(this.password1 !== this.password) {
				this.password1 = '';
				this.errorMessage = '确认密码输入不一致';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		}
	},
	computed: {
	},
	components: {
		errorTip,
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
html {
  height: 100%;
  body {
	height: 100%;
  }
}
#password {
	width: 100%;
	box-sizing: border-box;
	height: 100%;
	background-color: #f8f8f8;
	font-size: 32px;
	.password_part {
		background-color:  white;
		padding-left: 32px;
		.password_message {
			border-bottom: 1px solid #eaeaea;
			width: 100%;
			height: 88px;
			box-sizing: border-box;
			padding: 0 32px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			.password_message_content {
				outline:none;  
				border:0px;
				width: 70%;
			}
			.password_message_code {
				margin: 0;
				padding: 0;
				outline: none;
				color: #f3a13a;
				font-size: 24px;
			}
		}
	}
	.password_part2 {
		margin-top: 20px;
	}
	.password_button {
		margin: 64px auto 0;
		width: 680px;
		height: 88px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-size: 36px;
		color: white;
		background-color: #f3a13a;
		border: 1px solid transparent;  //自定义边框
		outline: none;    //消除默认点击蓝色边框效果
	}
}
</style>
